<template>
  <div style="width: 600px; height: 300px; position: relative; z-index: 2; background: skyblue;">
    <h1>我是盒子2</h1>
    <button @click="isShow = true">显示弹框</button>
    <!-- 可以把内部组件放在 to属性在的dom节点 -->
    <Teleport to="#model">
      <XtxDialog title="警告" :visible="isShow" @close="handleCloseFn">
      <template #default>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
      </template>

      <template #footer>
        <XtxButton type="gray" style="margin-right:20px" @click="isShow = false">否</XtxButton>
        <XtxButton type="primary">是</XtxButton>
      </template>
    </XtxDialog>
    </Teleport>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isShow = ref(false)

    const handleCloseFn = (flag) => {
      isShow.value = false
    }
    return {
      isShow,
      handleCloseFn
    }
  }
}
</script>
